<template>
    <view class="course-list">
        <view class="course-item" v-for="(course, index) in courses" :key="index">
            <view class="course-info">
                <view class="left">
                    <image class="course-image" :src="course.lessonPhoto" mode="aspectFill" />
                    <view class="course-detail">
                        <view class="course-name">{{ course.name }}</view>
                        <view class="course-status">状态: {{
                            getCourseStatus(course.status)
                        }}</view>
                        <view class="course-time">
                            <text class="course-type">
                                {{ getCourseType(course.type) }}
                            </text>
                            <text class="teacher" v-if="type != 2">{{ course.teacherName }}</text>
                            <text class="time" v-if="type != 2">{{ formatTime(course.startTime) }}-{{
                                formatTime(course.endTime)
                            }}</text>
                        </view>
                    </view>
                </view>
                <view class="right">
                    <image class="menu-icon" :src="commonStore.baseImageUrl + 'test-yujia/reservation/menu-icon.png'
                        ">
                    </image>
                    <button class="book-btn" :class="{ booked: course.joined }" @click="orderCourse(course)">
                        {{ type == 1 ? course.joined ? '已预约' : '预约' : '马上预约' }}
                    </button>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { useCommonStore } from "@/store";
import { getCourseStatus, formatTime, getCourseType } from "@/utils/tools";

const commonStore = useCommonStore();

defineProps({
    courses: {
        type: Array,
        default: () => [],
    },
    type: {
        type: Number,
        default: 1,  // 1：约课页面中的课程  2：老师详情页面中的课程
    },
});

const orderCourse = (course) => {
    if (course.joined) {
        uni.showToast({
            title: '你已预约过这个课程',
            icon: 'none'
        })
        return
    }
    // 团课|小班课支付：   
    uni.navigateTo({
    url: `/pages/subpackages/shopCenter/order-payment?courseCode=${course.courseCode}&orderType=2&lessonCode=${course.lessonCode}`,
  });
}
</script>

<style lang="scss" scoped>
.course-list {
    .course-item {
        background: #F2F2F2;
        border-radius: 24rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;

        .course-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            align-items: stretch;

            .left {
                display: flex;
                align-items: center;
                gap: 20rpx;

                .course-image {
                    width: 140rpx;
                    height: 140rpx;
                    border-radius: 8rpx;
                    background-color: #eee;
                    border-radius: 50%;
                }

                .course-detail {
                    display: flex;
                    flex-direction: column;
                    height: 160rpx;

                    .course-name {
                        font-size: 28rpx;
                        color: #333;
                        font-weight: bold;
                        margin-bottom: 8rpx;
                    }

                    .course-status {
                        font-size: 24rpx;
                        color: #8cb22c;
                        margin-bottom: 8rpx;
                    }

                    .course-time {
                        font-size: 24rpx;
                        color: #666;
                        display: flex;
                        align-items: center;
                        gap: 10rpx;
                        margin-top: auto;

                        .course-type {
                            font-size: 16rpx;
                            background: #2b2b2b;
                            border-radius: 8rpx;
                            padding: 4rpx 8rpx;
                            color: #fff;
                        }

                        .teacher {
                            margin-right: 20rpx;
                        }
                    }
                }
            }

            .right {
                display: flex;
                align-items: flex-end;
                flex-direction: column;
                justify-content: space-between;

                .menu-icon {
                    width: 24rpx;
                    height: 21rpx;
                }

                .book-btn {
                    background: #8cb22c;
                    color: #fff;
                    font-size: 24rpx;
                    padding: 8rpx 24rpx;
                    border-radius: 30rpx;
                    border: none;
                    line-height: 1.5;
                    flex-shrink: 0;

                    &.booked {
                        background: #ccc;
                    }
                }
            }
        }
    }
}
</style>